import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Column } from '@antv/g2plot';
import { useEffect, useState } from 'react';
import styles from './ironInventory.module.less';
const inventoryMap = {
    iron: 'inventory-iron',
    pack: 'inventory-pack',
    check: 'inventory-check'
};
export default (props) => {
    const { data, areaStockQty, field } = props;
    const [chart, setChart] = useState();
    // 库存量
    useEffect(() => {
        // if (data && data.length) {
        const columnPlot = new Column(`inventory-${field}`, {
            data: [],
            width: 500,
            isStack: true,
            autoFit: true,
            padding: [16, 12, 32, 32],
            xField: 'area',
            yField: 'value',
            seriesField: 'type',
            label: null,
            color: (value) => {
                if (value.type === 'Total') {
                    return '#072C88';
                }
                if (value.type === 'Full') {
                    return '#DD2A2A';
                }
                if (value.type === 'Large') {
                    return '#F7B500';
                }
                return '#0EC5DF';
            },
            legend: false,
            tooltip: false,
            xAxis: {
                label: {
                    autoHide: true,
                    autoRotate: false,
                    style: {
                        lineHeight: 20,
                        fontSize: 16,
                        fill: '#FFFFFF'
                    }
                },
                tickLine: null
            },
            yAxis: {
                range: [0, 0.88],
                title: {
                    text: '件数',
                    autoRotate: false,
                    position: 'end',
                    offset: 12,
                    style: {
                        fontSize: 16,
                        fill: '#FFFFFF'
                    }
                },
                label: {
                    style: {
                        fontSize: 16,
                        fill: '#FFFFFF'
                    }
                },
                grid: {
                    line: {
                        style: {
                            lineWidth: 1,
                            lineDash: [2, 5]
                        }
                    }
                }
            },
            // maxColumnWidth: 48,
            // minColumnWidth: 48,
            annotations: []
        });
        columnPlot.render();
        setChart(columnPlot);
    }, []);
    useEffect(() => {
        if (chart) {
            const barData = [];
            data.forEach((item) => {
                barData.push({
                    area: item.locationCode,
                    value: item.capacity - item.stockQty < 0
                        ? 0
                        : item.capacity - item.stockQty,
                    capacity: item.capacity,
                    type: 'Total'
                });
            });
            data.forEach((item) => {
                barData.push({
                    area: item.locationCode,
                    value: item.stockQty,
                    type: item.stockQty >= item.capacity
                        ? 'Full'
                        : item.stockQty / item.capacity > 0.9
                            ? 'Large'
                            : 'Basic'
                });
            });
            const annotations = [];
            const arr = barData.filter((item) => item.type === 'Total');
            arr.forEach((item, k) => {
                const target = barData.find((i) => i.area === item.area && ['Basic', 'Full', 'Large'].includes(i.type));
                const position = item.value + target.value < target.value
                    ? target.value
                    : item.value + target.value;
                annotations.push({
                    type: 'text',
                    position: [k, position],
                    content: `${item.capacity}`,
                    style: { textAlign: 'center', fontSize: 14, fill: '#fff' },
                    offsetY: -20
                });
            });
            const arr2 = barData.filter((item) => ['Basic', 'Full', 'Large'].includes(item.type));
            arr2.forEach((item, k) => {
                const target = barData.find((i) => i.area === item.area && ['Total'].includes(i.type));
                const realTotal = item.value + target.value;
                const position = Math.floor(item.value / 2) < 1 ? 1 : Math.floor(item.value / 2);
                annotations.push({
                    type: 'text',
                    position: [k, position],
                    content: `${item.value}\n${Number(((item.value / realTotal) * 100).toFixed(0))}% `,
                    style: { textAlign: 'center', fontSize: 14, fill: '#fff' },
                    offsetY: position % 2 === 1 ? -10 : 0
                });
            });
            chart.update({
                data: barData,
                annotations
            });
        }
    }, [chart, data]);
    return (_jsxs("div", { className: styles.container, children: [_jsxs("header", { className: styles.ironHeader, children: ["\u5305\u88C5\u5E93\u533A\u5E93\u5B58\u91CF\uFF1A", areaStockQty] }), _jsx("div", { id: inventoryMap[field], className: styles.ironBox })] }));
};
